<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style type="text/css">
        /*参考网址https://www.cnblogs.com/starof/p/4459991.html*/

        .demo{
            border: 1px solid #ccc;
            width: 300px;
            margin: 50px auto;
            padding: 10px;
        }

        /*将特殊的样式添加到文本的首字母*/
        .demo::first-letter{/*伪元素用两个冒号  */
             font-size: 40px;
              font-weight: bold;
              float: left;

        }
/*将特殊的样式添加到文本的首行*/
        .demo::first-line{
            color: red;
        }

        .demo01{
            width: 300px;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding: 10px;
            text-align: center;
        }

        .demo01::before{
            content: url("./img/003.png");
            display: block;
            width: 100px;
        }

        .demo01::after{
            content: url("./img/003.png");
            display: block;
        }

    </style>
</head>
<body>
<div class="demo">
    伪元素:before和:after可以做东西是相当惊人的。对于页面上的每一个元素，
    你拥有了两个更灵活的，而且可以完成其它html元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。
</div>

<div class="demo01">
    玩转c33新特性
</div>
</body>
</html>